<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{padding: 0;border: 0;margin: 0;outline: 0;box-sizing: border-box;}
			html,body{height: 100%;}
			.menu{position: absolute;top:0;bottom: 0;left: 0;width: 300px;border-right: 1px solid #ddd;}
			h4{height: 40px;line-height: 40px;border-bottom: 1px solid #ccc;padding-left: 10px;cursor: pointer;}
			ul{display: none;}
			ul.active{display: block;}
			li{height: 30px;line-height: 30px;padding-left: 20px;}
		</style>
	</head>
	<body>
		<div class="menu">
			<div class="big-category">
				<h4 onclick="show(this)">导航一</h4>
				<ul>
					<li>导航一#内容一</li>
					<li>导航一#内容二</li>
					<li>导航一#内容三</li>
				</ul>
			</div>
			<div class="big-category">
				<h4 onclick="show(this)">导航二</h4>
				<ul>
					<li>导航二#内容一</li>
					<li>导航二#内容二</li>
					<li>导航二#内容三</li>
				</ul>
			</div>
			<div class="big-category">
				<h4 onclick="show(this)">导航三</h4>
				<ul>
					<li>导航三#内容一</li>
					<li>导航三#内容二</li>
					<li>导航三#内容三</li>
				</ul>
			</div>
		</div>
		<script type="text/javascript">
			// on**** 事件系列，属于事件绑定，不管是写在行内，还是脚本里。
			// addEventListener 事件监听
			function show(ev){
				console.dir(ev);
				ev.nextElementSibling.classList.toggle('active');
			}
		</script>
	</body>
</html>